<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>模糊搜索</title>
	<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<style type="text/css">
		.second select {  
		    width: 11%;  
		    height: 106px;  
		    margin: 0px;  
		    outline: none;  
		    border: 1px solid #999;  
		    margin-top: 31px;  
		}  
		.second input {  
		    width: 167px;  
		    top: 9px;  
		    outline: none;  
		    border: 0pt;  
		    position: absolute;  
		    line-height: 30px;  
		    left: 8px;  
		    height: 20px;  
		    border: 1px solid #999;
		}  
		.second ul {  
		    position: absolute;  
		    top: 27px;  
		    border: 1px solid #999;  
		    left: 8px;  
		    width: 125px;  
		    line-height: 16px;  
		}  
		.ul li{  
		    list-style: none;  
		    width: 161px;  
		    /* left: 15px; */  
		    margin-left: -40px;  
		    font-family: 微软雅黑;  
		    padding-left: 4px;  
		}  
		.blue {   
		    background:#1e91ff;   
		} 

	</style>
</head>
<body>

<span class="second">  
    <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入"/>  
    <select name="makeupCoSe" id="typenum" onchange="changeF(this)" size="10" style="display:none;">  
        <option value="">李文安</option>  
        <option value="">张兴</option>  
        <option value="">无敌</option>  
        <option value="">a124</option>
        <option value="">b123</option>
        <option value="">c123</option>
        <option value="">d123</option>
        <option value="">e123</option>
        <option value="">f123</option>
        <option value="">g123</option>
        <option value="">h123</option>
        <option value="">i123</option>
        <option value="">g123</option>
        <option value="">k123</option>
        <option value="">l123</option>
        <option value="">m123</option>
        <option value="">姗姗</option>  
        <option value="">西格</option>  
        <option value="">上去1</option>  
        <option value="">上去2</option>  
        <option value="">上去3</option>  
        <option value="">上去4</option>  
        <option value="">上去5</option>  
        <option value="">上去6</option>  
        <option value="">上去7</option>  
        <option value="">夏利</option>  
    </select>  
</span>  


<script type="text/javascript">
	var TempArr=[];//存储option  
	$(function(){  
	    /*先将数据存入数组*/  
	    $("#typenum option").each(function(index, el) {  
	        TempArr[index] = $(this).text();  
	    });  
	    $(document).bind('click', function(e) {    
	        var e = e || window.event; //浏览器兼容性     
	        var elem = e.target || e.srcElement;    
	        while (elem) { //循环判断至跟节点，防止点击的是div子元素     
	            if (elem.id && (elem.id == 'typenum' || elem.id == "makeupCo")) {    
	                return;    
	            }    
	            elem = elem.parentNode;    
	        }    
	        $('#typenum').css('display', 'none'); //点击的不是div或其子元素     
	    });    
	})  
	  
	function changeF(this_) {  
	    $(this_).prev("input").val($(this_).find("option:selected").text());  
	    $("#typenum").css({"display":"none"});  
	}  
	function setfocus(this_){  
	    $("#typenum").css({"display":""});  
	    var select = $("#typenum");  
	    for(i=0;i<TempArr.length;i++){  
	        var option = $("<option></option>").text(TempArr[i]);  
	        select.append(option);  
	    }
	    setinput(this_);   
	}  
	  
	function setinput(this_){  
	    var select = $("#typenum");  
	    select.html("");  
	    for(i=0;i<TempArr.length;i++){  
	        //若找到以txt的内容开头的，添option  
	        if(TempArr[i].substring(0,this_.value.length).indexOf(this_.value)==0){  
	            var option = $("<option></option>").text(TempArr[i]);  
	            select.append(option);  
	        }  
	    }  
	}  
</script>
</body>
</html>